<template>
  <div class="layui-layout layui-layout-admin">
    <div class="adminnav1">
      <Pagetop></Pagetop>
    </div>
    <div class="adminnav2">
      <Secondnav urlname="homepage"></Secondnav>
    </div>
    <!-- 主体内容 -->
    <div class="layui-body kedou-admin" id="LAY_app_body app">
      <div class="layadmin-tabsbody-item layui-show">
        <div class="pagelist">
          <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title">
              <legend>店铺设置</legend>
            </fieldset>
          </div>

          <div class="layui-card-body cardbody">
            <div class="layui-form" lay-filter="">
              <div class="layui-form-item">
                <label class="layui-form-label">店铺名称:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入您的店铺名称" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">营业执照:</label>
                  <div class="layui-input-inline" style="width: 180px;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test1">
                        选择文件
                      </button>
                      <img class="layui-upload-img" id="demo1" style="width:100%; height:100%;">
                      <p id="demoText"></p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">二维码:</label>
                  <div class="layui-input-inline" style="width: 180px;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test2">
                        选择文件
                      </button>
                      <img class="layui-upload-img" id="demo2" style="width:100%; height:100%;">
                      <p id="demoText"></p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">分享图片:</label>
                  <div class="layui-input-inline" style="width: 180px;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test3">
                        选择文件
                      </button>
                      <img class="layui-upload-img" id="demo3" style="width:100%; height:100%;">
                      <p id="demoText"></p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">商业域名:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入您的域名" class="layui-input"
                    style="width:500px; background:#dddddd;">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">客户投诉电话:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入您电话" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">代理投诉电话:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入您的电话" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">总部电话:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入您的电话" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">公司/品牌名称:</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请网页授权" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">公司/品牌logo:</label>
                  <div class="layui-input-inline" style="width: 180px;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test4">
                        选择文件
                      </button>
                      <img class="layui-upload-img" id="demo4" style="width:100%; height:100%;">
                      <p id="demoText"></p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">描述文字:</label>
                <div class="layui-input-block" style="width: 280px;">
                  <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo">保存</button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagetop from "../common/pagetop.vue";
import Secondnav from "../common/secondnav.vue";
export default {
  name: "shopset",
  components: { Pagetop, Secondnav },
  data () {
    return {

    };
  },
  mounted () {
    var _this = this;
    window.getdata = this.getdata;
    layui.use("upload", function () {
      var upload = layui.upload;
      var uploadInst = upload.render({
        elem: "#test1", //绑定元素
        url: 'https://httpbin.org/post' //改成您自己的上传接口
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo1').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
      upload.render({
        elem: "#test2", //绑定元素
        url: 'https://httpbin.org/post' //改成您自己的上传接口
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo2').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
      upload.render({
        elem: "#test3", //绑定元素
        url: 'https://httpbin.org/post' //改成您自己的上传接口
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo3').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
      upload.render({
        elem: "#test4", //绑定元素
        url: 'https://httpbin.org/post' //改成您自己的上传接口
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo4').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
    });
  },
  methods: {
    updated: function () {
      layui.use("form", function () {
        var form = layui.form;
        form.render();
      })
    }
  },
};
</script>
<style scoped>
.layui-form-label {
  width: 120px;
}
.layui-input-block {
  margin-left: 150px;
  width: 220px;
}
/*二级导航*/
</style>